import { defineComponent, ref } from "vue";
import { activate } from "@/api/service-event"

export default defineComponent({
  name: 'ActiveToggle',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['update:list'],
  setup (props, { emit }) {
    const loading = ref(false)
    const setActive = async (state) => {
      loading.value = true
      await activate(props.data.id)
      emit('update:list')
      loading.value = false
    }

    return () => <el-switch
      modelValue={props.data.activated}
      active-color="#13ce66"
      inactive-color="#ff4949"
      loading={loading.value}
      onChange={val => { setActive(val) }}
    />
  }
})